<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>1.helloReact</title>
    </head>
    <body>
        <!-- 2.创建根容器 将来react 内容都会渲染到容器内部-->
        <div id="root"></div>
        <!-- 1.引入 react 相关库 暴露react对象-->
        <script src="./lib/react.development.js"></script>
        <script src="./lib/react-dom.development.js"></script>

        <script>
            // 3.创建 react 元素 (三个属性 元素标签 )
            const element = React.createElement
            'h1',//元素标签
            {id:'title',title:'这是一个标题'},//元素属性
            'hello react'//元素内容

            //4.将 React 元素渲染到根容器中
           const root = ReactDOM.createElement(document.getElementById('root'))//创建root节点
           root.render(element) //将element元素渲染到root节点中
        </script>
        
    </body>
</html>